<template>
  <div class='container'>
    <el-card>
      <!-- 搜索框 -->
      <el-form
      :model="formDate"
      label-width="80px"
      class="all-subjuct"
      ref="formDataRef"
      > 
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="formDate.subjectName" 
            class="subject-query"
          ></el-input>
          <el-button @click="clearForm" class="btn">清除</el-button>
          <el-button type="primary" @click="searchForm" class="btn">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="subjectDialogVisible = true"
          >新增学科</el-button>
        </el-form-item>
      </el-form>
      <!-- /搜索框 -->

      <!-- 警告栏 -->
      <el-alert
        type="info"
        show-icon
        :closable="false"
      >
        <span slot="title">数据一共{{this.total}}条</span>
      </el-alert>
      <!-- /警告栏 -->

      <!-- 表格区域 -->
      <el-table :data="list" >
        <el-table-column type="index" label="序号" width="50px"></el-table-column>
        <el-table-column
        prop="subjectName"
        label="学科名称"
        width="100px">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="120px">
        </el-table-column>
        <el-table-column
          label="创建日期"
          width="200px">
          <template slot-scope="scope">
             <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay === 1 ? '是' : '否'}}
            <!-- <span v-if="scope.row.isFrontDisplay === 1">是</span>
            <span v-else>否</span> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录">
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签">
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量">
        </el-table-column>
        <el-table-column label="操作" width="270px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="sort(scope.row)"
            >学科分类</el-button>
            <el-button type="text" @click="tally(scope.row)">学科标签</el-button>
            <el-button type="text" @click="amendBtn(scope.row)">修改</el-button>
            <el-button type="text" @click="removeSubject(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格 -->

      <!-- 分页区域 -->
      <div class="pagination" style="text-align: right">
          <PageTool
            :paginationPagesize="requestParameters.pagesize"
            :paginationPage="requestParameters.page"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
      <!-- /分页区域 -->

      <!-- 新增学科弹出框-->
      <el-dialog
        title="新增学科"
        :visible.sync="subjectDialogVisible"
        width="30%"
        >

        <!-- 输入框区域 -->
        <el-form :model="subjectRuleForm" :rules="subjectRules" ref="subjectRefs" label-width="100px">
          <el-form-item label="学科名称" prop="subjectName" >
            <el-input v-model="subjectRuleForm.subjectName" placeholder="请输入学科名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch
              v-model="subjectRuleForm.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>

        <!-- 底部按钮区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="exit">取 消</el-button>
          <el-button type="primary" @click="newForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /新增学科弹出框-->

      <!-- 修改按钮弹出框-->
      <el-dialog
        title="修改学科"
        :visible.sync="amendDialogVisible"
        width="30%">

        <!-- 输入框区域 -->
        <el-form :model="amendRuleForm" :rules="amendRules" ref="subjectRefs" label-width="100px">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="amendRuleForm.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch
              @change="switchChange"
              v-model="amendRuleForm.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>

        <!-- 底部按钮区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="amendDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="amendDialogBtn">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /修改按钮弹出框-->
    </el-card>
  </div>
</template>

<script>
import {
  list,
  update,
  add,
  remove,
  detail
} from '@/api/hmmm/subjects'
import PageTool from '@/module-manage/components/page-tool'
export default {
  name: 'subjectList',
  data () {
    return {
      listLoading: true,
      // 获取表格数据
      list: [],
      requestParameters: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 页面总数据
      total: 0,
      // 表单数据
      formDate: {
        subjectName: '',
        creatorID: '',
        isFrontDisplay: null,
        id: 0
      },
      // 控制新增学科弹出框的显示
      subjectDialogVisible: false,
      // 控制修改学科弹出框的显示
      amendDialogVisible: false,
      // 控制新增学科输入框的校验规则
      subjectRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]},
        // 控制修改学科输入框的校验规则
      amendRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]},
      subjectRuleForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      amendRuleForm: {
        subjectName: '',
        isFrontDisplay: ''
      },
      row: []
    }
  },
  methods: {
    // 获取列表数据
    async getList () {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // console.log(res)
      this.list = res.items
      this.total = res.counts
      console.log(this.list)
      this.listLoading = false
    },
    // 清除输入框数据
    clearForm () {
      this.$refs.formDataRef.resetFields()
    },
    // 搜索学科数据
    async searchForm () {
      console.log('searchForm....')
      console.log(this.formDate.subjectName)
      const data = {subjectName: this.formDate.subjectName}
      const { data: res } = await list(data)
      console.log(res)
      this.list = res.items
      console.log(this.list)
      this.total = res.counts
      this.listLoading = false
    },
    // 新增学科
    async newForm () {
      console.log('newForm...')
      var data = {
        subjectName: this.subjectRuleForm.subjectName,
        isFrontDisplay: this.subjectRuleForm.isFrontDisplay
      }
      const { data: res } = await add(data)
      console.log(res)
      this.getList()
      this.subjectDialogVisible = false
      this.$refs.subjectRefs.resetFields()
    },
    // 关闭新增学科弹层后清空输入框数据
    exit () {
      this.subjectDialogVisible = false
      this.$refs.subjectRefs.resetFields()
    },
    // 控制学科修改对话框的显示与隐藏
    async amendBtn (row) {
      this.row = row
      // const { data: res } = await update(row)
      // console.log(res)
      this.amendDialogVisible = true
      this.amendRuleForm.subjectName = row.subjectName
      this.amendRuleForm.isFrontDisplay = row.isFrontDisplay === 1 ? true : false
    },
    // 编辑修改学科数据
    async amendDialogBtn () {
      console.log('amendDialogBtn...')
      const data = {
        id: this.row.id,
        subjectName: this.amendRuleForm.subjectName,
        isFrontDisplay: this.amendRuleForm.isFrontDisplay ? 1 : 0
      }
      const { data: res } = await update(data)
      this.getList()
      this.amendDialogVisible = false 
      this.$message.success('操作成功')
    },
    // switch按钮改变状态触发
    async switchChange (value) {
      this.amendRuleForm.isFrontDisplay = value
    },
    // 根据ID删除指定学科
    async removeSubject (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      console.log(id)
      const { data } = await remove({id: id})
      console.log(data)
      this.$message.success('已删除成功')
      this.getList()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.formDataRef)
      }
    },
    // 跳转到学科目录页面
    sort (row) {
      const data = {
        id: row.id,
        name: row.subjectName
      }
      this.$router.push({path:'directorys',query: data})
    },
    // 跳转到学科目录页面
    tally (row) {
      console.log(row)
      const data = {
        id: row.id,
        name: row.subjectName
      }
      console.log(data)
      this.$router.push({path:'tags',query: data})
    }
  },
  components: {
    PageTool
  },
  created () {
    // 读取数据
    this.getList()
    // console.log(this.getList)
  },

}
</script>

<style scoped lang='less'>
.container{
  .el-card{
    margin: 15px;
  }
  .all-subjuct{
    display: flex;
    justify-content: space-between;
    .subject-query{
      width: 300px;
    }
    .btn{
        margin-left: 10px;
      }
  }
  .pagination{
    margin: 20px;
  }
  .el-alert{
    margin-bottom: 15px;
  }
  /deep/.el-dialog__body{
    padding: 30px 20px ;
  }
}
</style>
